<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-CN">
	<%@ include file="/WEB-INF/include-head.jsp" %>
	<link rel="stylesheet" href="css/pagination.css" />
	<script type="text/javascript" src="jquery/jquery.pagination.js"></script>
<script type="text/javascript">
	
	$(function(){
		// 调用后面声明的函数对页码导航条进行初始化操作
		initPagination();
		
		//删除功能-普通同（用a标签的href属性虽然也可以，但是无法弹出确认框，所以我们这里使用ajax的方式）
		$(".btnDellete").click(function () {
			//debugger;
			//alert("你点击了删除");
			//debugger;
			
			//从当前按钮出发 获取角色名称
			var roleName=$(this).parent().prev().prev().text();
			
			debugger;
			var roleId=this.id;//这样就能获取，当前用户点击的id ,牛批啊
			console.log("this:"+this);
			console.log("$(this):"+$(this));

			var userId=$(this).id;//获取不到id

			var userId2=$(this).parent().prev().prev().prev().text();//可以获取到id，但是比较笨
			//alert(roleId);
			
			debugger;
			
			//创建role对象存入数组
			var roleArray=[{roleId:roleId,roleName:roleName}];
			
			//打开模态框
			showConfirmModal(roleArray);
			
		});
		
		//如果在弹出的模态框点击了确认（那就开始执行）
		//点击确认模态框中的确认按钮进行删除
		$("#removeRoleBtn").click(function () {

			debugger;
			var requestBody = JSON.stringify(window.roleIdArray);

			var deleteAjax= $.ajax({
				"url":"admin/delete/array.ht",
				"type": "post",
				"data": requestBody,
				"contentType":"application/json;charset=UTF-8",
				"dataType":"json",
				async:true,//请求是否异步，默认为异步，这也是ajax重要特性
				beforeSend:function(){
			        //请求前的处理
			    },
				"success":function(response){
					debugger;
					 //请求成功时处理
					if(response.result=="SUCCESS"){
						layer.msg("删除成功");
						$("#summaryBox").prop("checked",false);
						//将页码定位到最后一页并且重新加载分页数据
						//window.pageNum=999999;
						//generatePage();
						
					}
					if(response.result=="FAILED"){
						console.log("FAILED");
						layer.msg("删除失败 ： "+response.message);
					}
					/*不管成功还是失败，最后记得关闭模态框，否则，，确认删除后，模态框不关闭  很影响用户体验*/
					$("#confirmModal").modal("hide");
					
					//因为这里的分页是同步做的，不是异步，动态生成的，所以我们需要刷新页面
					window.location.reload();//刷新当前页面
				},
				complete:function(){
			        //请求完成的处理
			    },
				"error":function(response){
					debugger;
					 //请求出错处理
					console.log("error");
					layer.msg(response.status+" "+response.satusText);
				}
			});
			console.log(deleteAjax);//如果想看详细调试结果就打印出来看看，很实用的一个技巧
		});

		//9、以下是 全选功能
		//给总的checkbox绑定单击响应函数
		$("#summaryBox").click(function() {

			//alert("你点击了全选");

			//获取当前全选框自身状态
			//访问checked属性就能够知道当前按钮的选中状态,返回的是true或者false
			var currentStatus=this.checked;
			//alert(currentStatus);

			//如何根据多选框的状态去设置(当前页)其它选择框的状态，需要在那些选择框加一个class 具体看笔记，这里不好描述
			$(".itemBox").prop("checked",currentStatus);//prop是永久性设置元素，att是一次性第二次点就没效果了

		});
		//10、下面的全部选上，全选按钮自动勾上
		//因为动态的所以要用on(注意，如果不是动态生成的用on也是可以的)
		$("#adminPageBody").on("click",".itemBox",function(){

			//debugger;
			//获取当前已经选中的.itemBox的数量
			var chexkedBoxCount=$(".itemBox:checked").length;

			//获取全部.itemBox的数量
			var totalBoxCount=$(".itemBox").length;

			//使用二者的比较结果设置总的checkBox
			$("#summaryBox").prop("checked",chexkedBoxCount==totalBoxCount);

		});
		//12、给批量删除的按钮绑定单击响应函数
		$("#batchRemoveBtn").click(function(){
			debugger;
			//alert("你点击了批量删除");
			//创建一个数组对象用来存放数组对象
			var roleArray=[];

			//遍历当前选中的多选框
			$(".itemBox:checked").each(function(){

				//使用this引用当前遍历得到的多选框
				var roleId=this.id;

				//通过DOM操作获取角色名称
				var roleName=$(this).parent().next().text();
				//alert (roleName);

				//数组对象存入数据
				roleArray.push({
					"roleId":roleId,
					"roleName":roleName
				});
			});
			//检查一下 roleArray的长度是否为0，为0就没必要执行下面的了，给出提示就会
			if(roleArray.length==0){
				layer.msg("请至少选择一个才能进行批量删除");
				return;
			}
			//调用专用的函数，打开模态框
			//打开模态框
			showConfirmModal(roleArray);
		});
	});
	
	// 生成页码导航条的函数
	function initPagination() {
		
		// 获取总记录数
		var totalRecord = ${requestScope.pageInfo.total};
		
		// 声明一个JSON对象存储Pagination要设置的属性
		var properties = {
			num_edge_entries: 3,								// 边缘页数
			num_display_entries: 5,								// 主体页数
			callback: pageSelectCallback,						// 指定用户点击“翻页”的按钮时跳转页面的回调函数
			items_per_page: ${requestScope.pageInfo.pageSize},	// 每页要显示的数据的数量
			current_page: ${requestScope.pageInfo.pageNum - 1},	// Pagination内部使用pageIndex来管理页码，pageIndex从0开始，pageNum从1开始，所以要减一
			prev_text: "上一页",									// 上一页按钮上显示的文本
			next_text: "下一页"									// 下一页按钮上显示的文本
		};
		
		// 生成页码导航条
		$("#Pagination").pagination(totalRecord, properties);
		
	}
	
	// 回调函数的含义：声明出来以后不是自己调用，而是交给系统或框架调用
	// 用户点击“上一页、下一页、1、2、3……”这样的页码时调用这个函数实现页面跳转
	// pageIndex是Pagination传给我们的那个“从0开始”的页码
	function pageSelectCallback(pageIndex, jQuery) {
		
		// 根据pageIndex计算得到pageNum
		var pageNum = pageIndex + 1;
		
		// 跳转页面
		window.location.href = "admin/get/page.ht?pageNum="+pageNum+"&keyword=${param.keyword}";
		
		// 由于每一个页码按钮都是超链接，所以在这个函数最后取消超链接的默认行为
		return false;
	}
	//声明专门的函数用于显示确认模态框
	function showConfirmModal(roleArray){
		
		debugger;
		/*打开模态框*/
		$("#confirmModal").modal("show");
		
		//千万别忘记要清楚一下上次打卡的旧数据，否则会一直叠加旧数据
		$("#roleNameDiv").empty();
		
		//在全局范围创建数组用来存放角色id
		window.roleIdArray=[];
		
		/*遍历roleArray数组*/
 		for (var i = 0; i < roleArray.length; i++) {
			
			var role = roleArray[i];
			
			var roleName = role.roleName;
			
			$("#roleNameDiv").append(roleName+"<br/>")
			
			var rolrId=role.roleId;
			
			//调用数组对象的push()方法存入新元素
			window.roleIdArray.push(rolrId);
		} 	
	}
	
</script>
  <body>
  		<%@ include file="/WEB-INF/include-nav.jsp" %>
    <div class="container-fluid">
			<%@ include file="/WEB-INF/include-sidebar.jsp" %>

		<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">
						<i class="glyphicon glyphicon-th"></i> 数据列表
					</h3>
				</div>
				<div class="panel-body">
					<form class="form-inline" action="admin/get/page.ht" method="post" role="form" style="float: left;">
						<div class="form-group has-feedback">
							<div class="input-group">
								<div class="input-group-addon">查询条件</div>
								<input name="keyword" class="form-control has-success" type="text"
									placeholder="请输入查询条件">
							</div>
						</div>
						<button type="submit" class="btn btn-warning">
							<i class="glyphicon glyphicon-search"></i> 查询
						</button>
					</form>
					<button id="batchRemoveBtn" type="button" class="btn btn-danger"
						style="float: right; margin-left: 10px;">
						<i class=" glyphicon glyphicon-remove"></i> 删除
					</button>
					
					<a class="btn btn-primary" style="float: right;"
						onclick="window.location.href='admin/to/admin-add.ht'" >
						<i class="glyphicon glyphicon-plus"></i> 新增
					</a>
					
					<br>
					<hr style="clear: both;">
					<div class="table-responsive">
						<table class="table  table-bordered">
							<thead>
								<tr>
									<th width="45">#</th>
									<th width="30"><input id="summaryBox"  type="checkbox"></th>
									<th>账号</th>
									<th style="display: none;">id</th>
									<th>名称</th>
									<th>邮箱地址</th>
									<th width="130">操作</th>
								</tr>
							</thead>
							<tbody id="adminPageBody">
							<c:if test="${empty requestScope.pageInfo.list }">
							<!-- 如果没有数据-->
								<tr>
									<td colspan="6" align="center">抱歉，没有查询到您要找的数据</td>
								</tr>
							</c:if>
							
							<c:if test="${!empty requestScope.pageInfo.list }">
							<!-- 如果有数据，!empty就是不为空，那就循环把数据取出来 -->
								<c:forEach items="${requestScope.pageInfo.list}" var="admin" varStatus="myStatus">
									<tr>
										<!-- myStatus.count 可以自动把序号列出来 -->
										<td>${myStatus.count }</td>
										<td><input id='${admin.id}' type="checkbox" class="itemBox"></td>
										<td>${admin.loginAcct }</td>
										<td style="display: none;">${admin.id}</td>
										<td>${admin.userName }</td>
										<td>${admin.email }</td>
										<td>
											<!-- 分配权限按钮  -->
											<a href="assign/to/assign/role/page.ht?adminId=${admin.id}&loginAcct=${admin.loginAcct}&pageNum=${requestScope.pageInfo.pageNum}&keyword=${param.keyword}" class="btn btn-info btn-xs">
												<i class=" glyphicon glyphicon-wrench"></i>
											</a>
											<!-- 查看按钮  需要回显数据-->
											<a href="admin/to/view.ht?id=${admin.id}" class="btn btn-success btn-xs">
												<i class=" glyphicon glyphicon-check"></i>
											</a>
											<!-- 修改/编辑按钮 需要回显数据-->
											<a href="admin/to/edit.ht?id=${admin.id}&pageNum=${requestScope.pageInfo.pageNum}&keyword=${param.keyword}" class="btn btn-primary btn-xs">
												<i class=" glyphicon glyphicon-pencil"></i>
											</a>
											<%-- <!-- 单条数据 删除按钮（同步） -->
											<a href="admin/delete/one/${admin.id}/${requestScope.pageI
											nfo.pageNum}/${param.keyword}.ht" class="btn btn-danger btn-xs btnDellete">
												<i class=" glyphicon glyphicon-remove"></i>
											</a> --%>
											<!-- 单条数据 删除按钮 【改成Ajax，Ajax可以是同步，也可以是异步】，因为删除的时候需要用户确认删除，需要弹出模态框，这里用ajax才比较好，用普通方式（非ajax）我无法控制模态框-->
											<a id='${admin.id}' class="btn btn-danger btn-xs btnDellete">
												<i class=" glyphicon glyphicon-remove"></i>
											</a>
										</td>
									</tr>
								</c:forEach>
							</c:if>
							</tbody>
							<tfoot>
								<tr>
									<td colspan="6" align="center">
<!-- 									<ul class="pagination">
											<li class="disabled"><a href="#">上一页</a></li>
											<li class="active"><a href="#">1 <span
													class="sr-only">(current)</span></a></li>
											<li><a href="#">2</a></li>
											<li><a href="#">3</a></li>
											<li><a href="#">4</a></li>
											<li><a href="#">5</a></li>
											<li><a href="#">下一页</a></li>
										</ul> -->
										
										<div id="Pagination" class="pagination"><!-- 这里显示分页（代替了上面的代码） --></div>
										
									</td>
								</tr>

							</tfoot>
						</table>
					</div>
				</div>
			</div>
		</div>
		
<!-- 模态框   信息删除确认(这里不像角色管理单独整个文件了) -->
<div id="confirmModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">系统弹窗</h4>
      </div>
      <div class="modal-body">
		<h5>请确认是否要删除下列用户</h5>
		<div id="roleNameDiv" style="text-align: center;"> </div>
      </div>
      <div class="modal-footer">
        <button id="removeRoleBtn" type="button" class="btn btn-primary">确认删除</button>
      </div>
    </div>
  </div>
</div>


	</div>
  </body>
</html>
